<!-- 集群调控 -->
<template>
  <a-row>
    <a-row class="mytitle">
      <!-- <a-icon :component="control" style="margin:0 .5rem 0 0" /> -->
      {{ $t('Cluster-regulation') }}
    </a-row>

    <NoAuthPage v-showNoAuth="'E6-1'" />

    <div style="padding: 20px;">
      <!-- v-userAuth="'E6'" -->
      <!--数据一致性检查-->
      <a-row :gutter="16">
        <a-col :span="12" v-userAuth="'E6-1'">
          <a-card :title="$t('Data-consistency-check')" :bordered="false" class="lab">
            <a-spin :spinning="boxLoading">
              <div class="bg">
                <p>
                  {{ $t('Automatic') }}：
                  <a-switch :checked="isauto" @change="onChangebtn" />
                </p>
                <p>
                  <a-form :form="form1">
                    <a-row style="padding-left: 0;">
                      <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" style="padding-right: 0.5em;">{{ $t('Time') }}：</a-col>
                      <a-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21" v-if="timedata">
                        <a-row style="padding-left: 0.5em;padding-bottom: 0.5em;">
                          <a-col :xs="23" :sm="23" :md="11" :lg="11" :xl="11">
                            <a-form-item>
                              <!-- initialValue:weekdata[Number(timedata.week.begin)+1].value -->
                              <a-select v-decorator="['bw', {
                                initialValue: timedata.week.begin == 0 ? weekdata[6].value : weekdata[Number(timedata.week.begin) - 1].value
                              }]" style="width: 100%;" @change="handleBweek" :disabled="!isauto">
                                <a-select-option v-for="(i, k) in weekdata" :key="k"
                                  :value="i.value">{{ i.label }}</a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="zhi">~</a-col>
                          <a-col :xs="23" :sm="23" :md="11" :lg="11" :xl="11">
                            <a-form-item>
                              <a-select v-decorator="['ew', {
                                initialValue: timedata.week.end == 0 ? weekdata[6].value : weekdata[Number(timedata.week.end) - 1].value
                              }]" style="width: 100%" @change="handleEweek" :disabled="!isauto">
                                <a-select-option v-for="(i, k) in weekdata" :key="k" :value="i.value"
                                  :disabled="i.value < bweek">{{ i.label }}</a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                        </a-row>
                        <a-row style="padding-left: 0.5em;">
                          <a-col :xs="23" :sm="23" :md="11" :lg="11" :xl="11">
                            <a-form-item>
                              <a-time-picker v-decorator="['bh', { initialValue: moment(timedata.hour.begin, 'HH:mm:ss') }]"
                                :minuteStep="60" :secondStep="60" @change="handleBhour" style="width: 100%;"
                                :disabled="!isauto" />
                            </a-form-item>
                          </a-col>
                          <a-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="zhi">~</a-col>
                          <a-col :xs="23" :sm="23" :md="11" :lg="11" :xl="11">
                            <a-form-item>
                              <a-time-picker v-decorator="['eh', { initialValue: moment(timedata.hour.end, 'HH:mm:ss') }]"
                                :minuteStep="60" :secondStep="60" :disabledHours="disabledEndHours" @change="handleEhour"
                                style="width: 100%;" :disabled="!isauto" />
                            </a-form-item>
                          </a-col>
                        </a-row>
                        <p v-if="flag" style="color:red;padding:0.5em 0 0 0.5em;">{{ $t('Input_error_date') }}</p>
                      </a-col>
                    </a-row>
                  </a-form>
                </p>
              </div>
            </a-spin>
            <div class="btn" v-userAuth="'E6-2'">
              <!-- <a-button
                type="danger"
                @click="reset1"
                style="background-color: #f5222d;color: #fff;margin-right: 1em;"
              >{{$t('Reset')}}</a-button> -->
              <a-button type="primary" @click="subtime">{{ $t('Save') }}</a-button>
            </div>
          </a-card>
        </a-col>
        <!--恢复速率-->
        <a-col :span="12">
          <a-spin :spinning="dataLoading">
            <a-card :title="$t('Recovery-rate')" :bordered="false" class="lab">
              <div class="bg">
                <!-- <p>
                <span style="color: red;">*</span>
                {{$t('Data-reconstruction-control')}}：
                <a-radio-group @change="onChange" v-model="tab">
                  <a-radio :value="1">{{$t('Refactoring-first')}}</a-radio>
                  <a-radio :value="2">{{$t('Business-first')}}</a-radio>
                  <a-radio :value="3">{{$t('Default')}}</a-radio>
                  <a-radio :value="4">{{$t('Customize')}}</a-radio>
                </a-radio-group>
              </p> -->
                <a-form :form="form2">
                  <a-form-item :label="$t('Data-reconstruction-control')"
                    v-bind="currentLanguage == 'zh' ? formlayout : formlayout_en">
                    <a-radio-group @change="onChange" v-decorator="['type', {
                      rules: [{ required: true, message: $t('Select-reconstruction-control') }],
                      initialValue: Number(recoverdata.pattern)
                    }]"><!--v-model="tab"-->
                      <a-radio :value="1">{{ $t('Refactoring-first') }}</a-radio>
                      <a-radio :value="2">{{ $t('Business-first') }}</a-radio>
                      <a-radio :value="0">{{ $t('Default') }}</a-radio>
                      <a-radio :value="3">{{ $t('Customize') }}</a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item :label="$t('Maxdata-backfill')" v-bind="currentLanguage == 'zh' ? formlayout : formlayout_en">
                    <a-input disabled v-decorator="['max_backfills1', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-backfill') }],
                      initialValue: '4'
                    }]" v-if="tab == 1" />
                    <a-input disabled v-decorator="['max_backfills2', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-backfill') }],
                      initialValue: '1'
                    }]" v-if="tab == 2" />
                    <a-input disabled v-decorator="['max_backfills3', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-backfill') }],
                      initialValue: '3'
                    }]" v-if="tab == 0" />
                    <a-input v-decorator="['max_backfills4', {
                      rules: [
                        { required: true, message: $t('Enter') + $t('Maxdata-backfill') },
                        { pattern: recoveryRateRule, message: $t('RecoveryRate-rule') }
                      ],
                      initialValue: recoverdata.max_backfills
                    }]" v-if="tab == 3" />
                  </a-form-item>
                  <a-form-item :label="$t('Maxdata-recovery')" v-bind="currentLanguage == 'zh' ? formlayout : formlayout_en">
                    <a-input disabled v-decorator="['max_active1', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-recovery') }],
                      initialValue: '4'
                    }]" v-if="tab == 1" />
                    <a-input disabled v-decorator="['max_active2', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-recovery') }],
                      initialValue: '1'
                    }]" v-if="tab == 2" />
                    <a-input disabled v-decorator="['max_active3', {
                      rules: [{ required: true, message: $t('Enter') + $t('Maxdata-recovery') }],
                      initialValue: '3'
                    }]" v-if="tab == 0" />
                    <a-input v-decorator="['max_active4', {
                      rules: [
                        { required: true, message: $t('Enter') + $t('Maxdata-recovery') },
                        { pattern: recoveryRateRule, message: $t('RecoveryRate-rule') }
                      ],
                      initialValue: recoverdata.max_active
                    }]" v-if="tab == 3" />
                  </a-form-item>
                  <a-form-item :label="$t('Data-slice-recovery')" v-bind="currentLanguage == 'zh' ? formlayout : formlayout_en">
                    <a-input disabled v-decorator="['max_single_start1', {
                      rules: [{ required: true, message: $t('Enter') + $t('Data-slice-recovery') }],
                      initialValue: '4'
                    }]" v-if="tab == 1" />
                    <a-input disabled v-decorator="['max_single_start2', {
                      rules: [{ required: true, message: $t('Enter') + $t('Data-slice-recovery') }],
                      initialValue: '1'
                    }]" v-if="tab == 2" />
                    <a-input disabled v-decorator="['max_single_start3', {
                      rules: [{ required: true, message: $t('Enter') + $t('Data-slice-recovery') }],
                      initialValue: '1'
                    }]" v-if="tab == 0" />
                    <a-input v-decorator="['max_single_start4', {
                      rules: [
                        { required: true, message: $t('Enter') + $t('Data-slice-recovery') },
                        { pattern: recoveryRateRule, message: $t('RecoveryRate-rule') }
                      ],
                      initialValue: recoverdata.max_single_start
                    }]" v-if="tab == 3" />
                  </a-form-item>
                  <a-form-item :label="$t('Recovery-interval')" v-bind="currentLanguage == 'zh' ? formlayout : formlayout_en">
                    <a-input disabled v-decorator="['sleep1', {
                      rules: [{ required: true, message: $t('Enter') + $t('Recovery-interval') }],
                      initialValue: '0'
                    }]" v-if="tab == 1" />
                    <a-input disabled v-decorator="['sleep2', {
                      rules: [{ required: true, message: $t('Enter') + $t('Recovery-interval') }],
                      initialValue: '0.5'
                    }]" v-if="tab == 2" />
                    <a-input disabled v-decorator="['sleep3', {
                      rules: [{ required: true, message: $t('Enter') + $t('Recovery-interval') }],
                      initialValue: '0'
                    }]" v-if="tab == 0" />
                    <a-input v-decorator="['sleep4', {
                      rules: [
                        { required: true, message: $t('Enter') + $t('Recovery-interval') },
                        { pattern: dataRecoveryRule, message: $t('DataRecovery-rule') }
                      ],
                      initialValue: Number(recoverdata.sleep).toFixed(0)
                    }]" :v-model="recoverdata.sleep" v-if="tab == 3" />
                  </a-form-item>
                  <!-- <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
									<a-button type="primary" html-type="submit">
										Submit
									</a-button>
                </a-form-item>-->
                </a-form>
              </div>
              <div class="btn" v-userAuth="'E6-3'">
                <a-button style="margin-right: 1em;"
                  @click="reset2">{{ $t('Reset') }}</a-button><!--background-color: #f5222d;-->
                <a-button type="primary" @click="handleSubmit">{{ $t('Save') }}</a-button>
              </div>
            </a-card>
          </a-spin>
        </a-col>
      </a-row>
    </div>
  </a-row>
</template>

<script>
import moment from "moment";
// import control from "../../../../static/images/svg/ic_control_normal.svg";
// import mark from "../../../../static/images/svg/ic_-.svg";
// import Vue from "vue";
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
  // template: '<a-icon :component = "mark,control" />',
  components: { NoAuthPage },
  data() {
    return {
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      value: '',
      // mark,
      // control,
      tab: '',
      timedata: "",
      recoverdata: {},
      formlayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      },
      formlayout_en: {
        labelCol: { span: 11 },
        wrapperCol: { span: 13 }
      },
      isauto: "",
      bweek: "",
      eweek: "",
      bhour: "",
      ehour: "",
      weekdata: [
        { value: 1, label: this.$t("Every-Monday") },
        { value: 2, label: this.$t("Every-Tuesday") },
        { value: 3, label: this.$t("Every-Wednesday") },
        { value: 4, label: this.$t("Every-Thursday") },
        { value: 5, label: this.$t("Every-Friday") },
        { value: 6, label: this.$t("Every-Saturday") },
        { value: 7, label: this.$t("Every-Sunday") }
      ],
      flag: false,
      max_backfills: "",
      max_active: "",
      max_single_start: "",
      sleep: "",
      currentLanguage: JSON.parse(localStorage.getItem('language')) || 'zh',
      recoveryRateRule: /^([1-9]|([1-6][1-4]))$/, //1-64
      dataRecoveryRule: /^(0|([1-9])|([1-9]\d\d{0,1})|([1-2]\d\d\d)|(3[0-5]\d\d)|3600)$/, //0-3600
      defaultType: '',
      dataLoading: false,
      boxLoading: false,
    };
  },
  computed: {
    getlanguage() {
      return this.$store.state.language;
    }
  },
  watch: {
    getlanguage(val) {
      this.currentLanguage = val;
      this.weekdata = [
        { value: 1, label: this.$t("Every-Monday") },
        { value: 2, label: this.$t("Every-Tuesday") },
        { value: 3, label: this.$t("Every-Wednesday") },
        { value: 4, label: this.$t("Every-Thursday") },
        { value: 5, label: this.$t("Every-Friday") },
        { value: 6, label: this.$t("Every-Saturday") },
        { value: 7, label: this.$t("Every-Sunday") }
      ];
    }
  },
  mounted() {
    this.gettime();
    this.getrecover();
  },
  methods: {
    gettime() {
      this.boxLoading = true;
      request('get', "ops/conf/ceph/scrub").then(res => {
        // console.log('获取数据一致性时间:', res)
        // if(res.data.flag == 0){
        if (res.status == 200) {
          this.timedata = res.data;
          // console.log('zzzz', this.timedata)
          this.bweek = this.timedata.week.begin;
          this.eweek = this.timedata.week.end;
          this.bhour = this.timedata.hour.begin;
          this.ehour = this.timedata.hour.end;
          this.isauto = this.timedata.is_auto;
        }
      }).finally(() => {
        this.boxLoading = false;
      })
    },
    onChangebtn() {
      this.isauto = !this.isauto;
    },
    handleBweek(value) {
      this.bweek = value;
    },
    handleEweek(value) {
      this.eweek = value;
    },
    handleBhour(time, timeString) {
      if (timeString.charAt(0) == 0) {
        this.bhour = timeString.substr(1, 1);
      } else {
        this.bhour = timeString.substr(0, 2);
      }
    },
    handleEhour(time, timeString) {
      if (timeString.charAt(0) == 0) {
        this.ehour = timeString.substr(1, 1);
      } else {
        this.ehour = timeString.substr(0, 2);
      }
    },
    subtime() {
      if (
        ((this.bweek <= this.eweek && this.eweek != 0)
          || (this.eweek == 0))
        &&
        parseInt(this.bhour) <= parseInt(this.ehour)
      ) {
        this.flag = false;
        request('post', "ops/conf/ceph/scrub", {
          week: {
            begin: this.bweek,
            end: this.eweek
          },
          hour: {
            begin: this.bhour,
            end: this.ehour
          },
          is_auto: this.isauto
        })
          .then(res => {
            this.model(res.data.id); //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag); //通知列表显示
            // this.gettask(); //任务栏信息
            this.gettime();
          });
      } else {
        this.flag = true;
      }
    },
    // 重置还没有完成
    reset1() {
      this.form1.resetFields();
    },
    reset2() {
      this.form2.resetFields();
      this.form2.setFieldsValue({
        type: this.defaultType
      })
      this.tab = this.defaultType;
    },
    moment,
    onChange(e) {
      if (e.target.value == 1) {
        this.tab = 1;
      }
      if (e.target.value == 2) {
        this.tab = 2;
      }
      if (e.target.value == 0) {
        this.tab = 0;
      }
      if (e.target.value == 3) {
        this.tab = 3;
      }
    },
    getrecover() {
      request('get', "ops/conf/ceph/recovery").then(res => {
        // console.log('恢复速率默认数据', res)
        this.recoverdata = res.data;
        //1重构优先 2业务优先 0默认设置 3自定义设置
        this.tab = Number(res.data.pattern);
        this.defaultType = Number(res.data.pattern);
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.dataLoading = true;
      this.form2.validateFields((err, values) => {
        if (!err) {
          if (this.tab == 1) {
            this.max_backfills = values.max_backfills1;
            this.max_active = values.max_active1;
            this.max_single_start = values.max_single_start1;
            this.sleep = values.sleep1;
          } else if (this.tab == 2) {
            this.max_backfills = values.max_backfills2;
            this.max_active = values.max_active2;
            this.max_single_start = values.max_single_start2;
            this.sleep = values.sleep2;
          } else if (this.tab == 0) {
            this.max_backfills = values.max_backfills3;
            this.max_active = values.max_active3;
            this.max_single_start = values.max_single_start3;
            this.sleep = values.sleep3;
          } else if (this.tab == 3) {
            this.max_backfills = values.max_backfills4;
            this.max_active = values.max_active4;
            this.max_single_start = values.max_single_start4;
            this.sleep = values.sleep4;
          }
          request('post', "ops/conf/ceph/recovery", {
            pattern: values.type,
            max_backfills: this.max_backfills,
            max_active: this.max_active,
            max_single_start: this.max_single_start,
            sleep: this.sleep
          })
            .then(res => {
              this.model(res.data.id); //返回模板
              this.notice(res.data.id, res.data.params, res.data.flag); //通知列表显示
              // this.gettask(); //任务栏信息
              this.getrecover();
              this.dataLoading = false;
              // this.form2.resetFields();
            });
        }
      });
    },
    disabledEndHours() {
      //限制结束时间大于开始时间
      let hours = [];
      for (let i = 0; i < parseInt(this.bhour); i++) {
        hours.push(i);
      }
      return hours;
    }
  }
};
</script>

<style scoped>
::v-deep .ant-card-head-title {
  color: #333;
}

ul {
  padding: 0;
}

ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lab {
  box-shadow: 0px 2px 8px #ccc;
}

.bg {
  /* background-color: rgba(226, 245, 255, 1); */
  margin: 10px;
  padding: 1em;
  /*padding-bottom: 10em;*/
  height: 25em;
}

.zhi {
  line-height: 2.3em;
  margin: 0 0.5em;
  text-align: center;
}

.btn {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 1em;
}

.list {
  margin-bottom: 1em;
  display: flex;
  justify-content: flex-start;
}
</style>
